<template>
  <div class="demo-upload-list" v-for="(item,index) in uploadList">
    <Image :src="item.url" fit="cover" width="100%" height="100%"/>
    <div class="demo-upload-list-cover">
      <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
      <Icon type="ios-trash-outline" @click="handleRemove(index)"></Icon>
    </div>
  </div>
  <Upload
      ref="upload"
      :before-upload="handleBeforeUpload"
      multiple
      type="drag"
      style="display: inline-block">
    <div class="demo-upload">
      <Icon type="ios-camera" size="25"></Icon>
    </div>
  </Upload>
  <ImagePreview v-model="visible" :preview-list="[imgName]"/>
</template>
<script lang="ts" setup>
import {Notice} from "view-ui-plus";
import {onMounted, ref} from "vue";
import {base64ToFile} from "@/plugins/index"

let imgName = ref('');
let visible = ref(false);
let uploadList = ref<any>([]);
let upload = ref();


const props = withDefaults(
    defineProps<{}>(),
    //设置默认值
    {}
);

const appendChild = (url: any) => {
  uploadList.value.push({
    file: base64ToFile(url, Date.now() + '.png'),
    url: url
  });
}

onMounted(() => {

})


const handleView = (url: string) => {
  imgName.value = url;
  visible.value = true;
}

const handleRemove = (index) => {
  uploadList.value.splice(index, 1)
}

const handleClear = () => {
  // 清空截图
  uploadList.value = []
}


let handleBeforeUpload = (file: any) => {
  // 手动上传图片 这里只做图片展示
  let files = file.name.split('.');
  let included = ["png", "jpg", "jpeg", "gif"];
  let name = files[files.length - 1];

  if (included.indexOf(name) === -1) {
    // 格式错误
    return Notice.error({
      title: '上传格式错误',
      desc: '上传文件《' + file.name + '》的格式错误，必须为' + included.join('、')
    });
  }
  const maxSize = 5 * 1024 * 1024;// 最大支持上传5M
  if (file.size > maxSize) {
    return Notice.error({
      title: '上传大小错误',
      desc: '图片《' + file.name + '》内存超过了5MB'
    });
  }
  let reader = new FileReader()
  reader.onload = function (e: any) {
    var imageUrl = e.target.result; // 获取到的图片URL
    // 使用imageUrl进行后续操作，比如显示图片或者下载等
    // console.log(imageUrl); // 在控制台输出图片的URL
    uploadList.value.push({
      file: file,
      url: imageUrl
    })
  };
  reader.readAsDataURL(file);
  return false;
}

defineExpose({
  appendChild,
  uploadList,
  handleClear
})

</script>
<style lang="scss" scoped>
.demo-upload {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  margin-right: 4px;
}

.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
